<template>
  <div class="home-page">
    <div v-if="route.query.q" class="search-notice">
      搜索关键词: "{{ route.query.q }}"
      <button class="clear-search" @click="clearSearch">清除</button>
    </div>

    <div class="hero-banner">
      <h1>校园二手交易平台</h1>
      <p>买卖闲置物品，让资源循环利用</p>
      <router-link to="/publish" class="btn btn-secondary">立即发布</router-link>
    </div>
    
    <div class="categories">
      <h2 class="section-title">热门分类</h2>
      <div class="category-list">
        <div class="category-card" v-for="category in categories" :key="category.id">
          <div class="category-icon">{{ category.icon }}</div>
          <h3>{{ category.name }}</h3>
        </div>
      </div>
    </div>
    
    <div class="featured-items">
      <h2 class="section-title">最新商品</h2>
      <div class="grid-container">
        <ItemCard 
          v-for="item in items" 
          :key="item.id" 
          :item="item" 
          @click="viewItemDetail(item.id)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, inject } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import ItemCard from './ItemCard.vue'

export default {
  components: { ItemCard },
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    const categories = ref([
      { id: 1, name: '教材书籍', icon: '📚' },
      { id: 2, name: '电子数码', icon: '💻' },
      { id: 3, name: '生活用品', icon: '🏠' },
      { id: 4, name: '服装鞋帽', icon: '👕' },
      { id: 5, name: '体育用品', icon: '⚽' },
      { id: 6, name: '其他', icon: '📦' }
    ])
    
    // const items = ref([
    //   { 
    //     id: 1, 
    //     title: '高等数学教材', 
    //     price: 25, 
    //     image: 'book', 
    //     category: '教材书籍',
    //     description: '几乎全新，无笔记痕迹',
    //     seller: '张同学',
    //     contact: '123456',
    //     publishDate: '2025-07-18'
    //   },
    //   { 
    //     id: 2, 
    //     title: '二手笔记本电脑', 
    //     price: 1200, 
    //     image: 'laptop', 
    //     category: '电子数码',
    //     description: '联想小新，i5处理器，8G内存，使用两年',
    //     seller: '李同学',
    //     contact: '456789',
    //     publishDate: '2025-07-18'
    //   },
    //   { 
    //     id: 3, 
    //     title: '篮球', 
    //     price: 50, 
    //     image: 'basketball', 
    //     category: '体育用品',
    //     description: '斯伯丁篮球，使用半年，保存完好',
    //     seller: '王同学',
    //     contact: '789456',
    //     publishDate: '2025-07-18'
    //   },
    //   { 
    //     id: 4, 
    //     title: '台灯', 
    //     price: 30, 
    //     image: 'lamp', 
    //     category: '生活用品',
    //     description: 'LED护眼台灯，可调节亮度',
    //     seller: '赵同学',
    //     contact: '456123',
    //     publishDate: '2025-07-18'
    //   }
    // ])
    
      const items = inject('items') 

    const viewItemDetail = (itemId) => {
      router.push({ name: 'item-detail', params: { id: itemId } })
    }

    const clearSearch = () => {
      router.push({ path: '/', query: {} }) // 清除查询参数
    }
    
    return {
      categories,
      items,
      viewItemDetail,
      route,
      clearSearch
    }
  }
}
</script>

<style scoped>
.home-page {
  padding-bottom: 40px;
}

.hero-banner {
  background: linear-gradient(135deg, var(--primary-color), #6a93cb);
  color: white;
  padding: 60px 20px;
  text-align: center;
  border-radius: var(--border-radius);
  margin-bottom: 40px;
}

.hero-banner h1 {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.hero-banner p {
  font-size: 1.2rem;
  margin-bottom: 25px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.category-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.category-card {
  background: white;
  border-radius: var(--border-radius);
  padding: 20px 15px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow);
}



.category-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.category-card h3 {
  font-size: 1.1rem;
  color: var(--dark-color);
}

.search-notice {
  background-color: var(--light-color);
  padding: 15px;
  border-radius: var(--border-radius);
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.clear-search {
  background: none;
  border: 1px solid var(--gray-color);
  color: var(--gray-color);
  padding: 5px 10px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.3s;
}

.clear-search:hover {
  background-color: #f8f9fa;
}
</style>